<template>
    <div id="app">
        <el-headr>
            <!-- 定义对外部通讯的prop参数 -->
            <HeaderPage :avatar="avatar" :nick_name="nick_name" :is_admin="isAdmin"></HeaderPage>
        </el-headr>
        <el-row class="counter_logo">    
          <h2>收银台</h2>
        </el-row>
         <div class="counter_detail">
            <div class="order"><span>订单编号:</span><span>{{this.order_id}}</span></div>
            <div class="payable"><span>应付金额:</span><span class="amount">￥{{this.amount}}</span></div>
         </div>
         <div class="counter_qrcode">
              <div><img class="wx_pay_icon" src="../assets/wxpay.png" alt="微信支付图标"/>
              <div class="pay_text"><span>支付金额：￥</span><span class="check_amount">{{this.amount}} </span><span> 元</span></div>
            </div>
         </div>
          <div class="count_down">请在{{this.formattedTime}}内完成充值 
            <el-button type="primary" @click="mocky_recharge">模拟充值——正式环境中，该按钮将被隐藏</el-button>
          </div>
          <canvas v-if="show_qr_canvas" id="qrcode_canvas"></canvas>
         <FooterPage style="margin:40dvh 40dvw "></FooterPage>
    </div>
  </template>
  
  
  <script>
    import HeaderPage from '@/components/HeaderPage.vue'
    import FooterPage from '@/components/FooterPage.vue'
    import qrcode from 'qrcode'
    import {ref,computed,toRefs} from 'vue';
    import axios from 'axios';
    import { ElNotification } from 'element-plus';

    export default {
        name: 'wx_pay_url_qrcode',
        components:{
            HeaderPage,
            FooterPage,
          },

          data(){
            return {
                nick_name:null,
                avatar:null,
                order_id:null,
                amount:null,
                user_id:null,
                callback_qrcode:null,
                downCount:900,
                downCountFrezz:false,
                timer:null,
                formattedTime:'',
                show_qr_canvas:true,
                isAdmin:false,
            };
        },

        created(){
          this.user_profiles();
          this.start_count_down();
        },
        mounted(){
            this.order_id = this.$route.params.order_id;
            this.amount = this.$route.params.amount;
            this.user_id = this.$route.params.user_id;
            this.callback_qrcode = this.$route.params.qrcode;

            console.log("order_id:", this.order_id);
            console.log("amount:", this.amount);
            console.log("user_id:", this.user_id);
            console.log("qrcode:", this.callback_qrcode);

            this.createQRcode();
        },
       

        methods:{
            createQRcode(){
                try{
                    console.log("准备绘制二维码")
                    const canvas=document.getElementById('qrcode_canvas');
                    qrcode.toCanvas(canvas,this.callback_qrcode,{
                      width:200,
                      height:200,
                      colorDark:"#000",
                      colorLight:"#fff",
                      });
                    //this.$refs['qrcode'].src=this.qrcode
                }
                catch(error){
                    console.log(error)
                }
            },
            //获取用户信息
            async user_profiles(){
                const login_token= await this.$commonFunctions.get_cookies('login_token')
                const user_profiles= await this.$commonFunctions.get_user_profiles(login_token);

                this.nick_name=user_profiles.name;
                this.avatar=user_profiles.avatar;
                this.user_id=user_profiles.user_id;
                this.isAdmin=user_profiles.is_superuser

            },
            //倒计时
            start_count_down(){
              this.downCountFrezz=true;
        
              //倒计时
              this.timer=setInterval(()=>{
              this.formattedTime=Math.floor(this.downCount/60)+" 分"+this.downCount%60+ " 秒";
              this.downCount--;
          
         
                  if(this.downCount<0){
                      console.log(this.downCount);
                      clearInterval(this.timer)
                      this.downCount=900;
                      this.downCountFrezz=false;
                      this.formattedTime="订单已超时，请重新下单"
                      this.show_qr_canvas=false;
                  }
                },1000);
            },

            //这个方法用作模拟充值，正式环境不会使用这种方法充值
            async mocky_recharge(){
              const data={
                "user_id":this.user_id,
                "amount":parseFloat(this.amount),
                "transcation_id":crypto.randomUUID().replace(/-/g,''),
                "order_id":this.order_id,};
            
                await axios.post("/api/record_recharge/",data, { withCredentials: true })
                    .then(response => {
                        console.log("模拟充值接口运行结果："+response.data["code"]+response.data["msg"]+response.data["data"][0]["balance"])
                        
                        if(response.data["code"]===20000){
                        this.$router.push("/user_center")
                        ElNotification({
                          message: response.data["msg"]+response.data["data"][0]["balance"],
                          title: response.data["code"],
                          type: "success",
                          duration: 3000,
                      });
                      }else{
                        ElNotification({
                          message: response.data["msg"],
                          title: response.data["code"],
                          type: "warning",
                          duration: 3000,
                      });
                      }
                    });
                    
                        
                }
          }
    }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  div.counter_detail{
    height: 70px;
    background-color: #e2e2e2;
  }
  div.counter_detail span{
    font-size: 12px;
    color: #000;
  }

  div.order,div.payable{
    margin: 5dvh 5dvw 0 5dvw;
  }

  div.order{
    float: left;
  }

  div.payable{
    float: right;
  }

  span.amount{
    font-weight: bolder;
  }

  div.counter_qrcode{
    width: 95%;
    height: 45px;
    margin: 5dvh 2.5dvw 5dvh 2.5dvw;
    border: 1px solid #ccc;
    vertical-align: middle;
    text-align: start;
    border-radius: 6px;
  }

  div.counter_qrcode span{
    font-size: 14px;
    font-weight: 550;
  }

  img.wx_pay_icon{
    margin: 1.5dvh 2dvw 1.5dvh 2dvw;
    width: auto;
    height: 30px;

  }
  span.check_amount{
    font-weight: bolder;
    color:#ff6600;
    font-size: 13pt;
  }

  div.pay_text{
    margin: 2.5dvh 2dvw 1.5dvh 2dvw;
    float: right;
  }

  canvas{
    float: left;
    margin: 0 2dvw;
  }

  .count_down{
    font-size: 13pt;
    color:#ff6600;
    padding-left: 4dvw;
    text-align: start;
    margin-left: 2dvw;
    z-index:99;
  }
  </style>